<template>
  <div class="maps-container">
    <div id="main" style="width:100%; height:100%"></div>
  </div>
</template>
<script>
import "echarts/map/js/province/yunnan.js";
import obj from "echarts/map/json/province/yunnan.json";
export default {
  data() {
    return {
      listArr: [], //城市json
      max: "", //最大value值
      min: "" // 最小value值
    };
  },
  created() {
    this.getData();
  },
  mounted() {
    this.DrawMap();
  },
  methods: {
    getData() {
      // 获取城市名称数据
      console.log("取到的云南省的json数据", obj);
      if (obj) {
        let arr = obj.features;
        // 循环取出 城市名称和value值
        for (var j = 0; j < arr.length; j++) {
          this.max = arr[0].id;
          this.min = arr[0].id;
          if (arr[j].id > this.max) {
            this.max = arr[j].id;
          }
          if (arr[j].id < this.min) {
            this.min = arr[j].id;
          }
          this.listArr.push({
            name: arr[j].properties.name,
            value: arr[j].id
          });
        }
      }
    },
    DrawMap() {
      let _this = this;
      let myChart8 = this.$echarts.init(document.getElementById("main"));

      myChart8.setOption({
        // visualMap: {
        //   min: _this.min,
        //   max: _this.max,
        //   show: false,
        //   inRange: {
        //     color: ["lightskyblue", "yellow", "orangered"]
        //   }
        // },
        series: [
          {
            type: "map",
            map: "云南",
            itemStyle: {
              normal: { label: { show: true } },
              emphasis: { label: { show: true } },
              emphasis: {
                areaColor: "#67C23A" //鼠标进入时的颜色
              }
            },
            itemStyle: {
              normal: {
                borderColor: "rgba(147, 235, 248, 1)",
                borderWidth: 1,
                areaColor: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(147, 235, 248, 0)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(147, 235, 248, .2)" // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                },
                shadowColor: "rgba(128, 217, 248, 1)",
                // shadowColor: 'rgba(255, 255, 255, 1)',
                shadowOffsetX: -2,
                shadowOffsetY: 2,
                shadowBlur: 10
              },
              emphasis: {
                areaColor: "#389BB7",
                borderWidth: 0
              }
            },
            data: _this.listArr
          }
        ]
      });
    }
  }
};
</script>
<style scoped lang="scss">
.maps-container {
  width: 100%;
  height: 100%;
}
</style>
